<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
    name: "AddPolygon.component",
    components: {Maptalks},
    setup() {

        let mapOnLoadCB = (map, mapUtil) => {

            let pointList = [
                [-0.131049, 51.498568],
                [-0.107049, 51.498568],
                [-0.107049, 51.493568],
                [-0.131049, 51.493568],
                [-0.131049, 51.498568]
            ]
            mapUtil.setView(pointList)


            let polygon = new maptalks.Polygon([pointList], {
                symbol: {
                    "lineColor": "#34495e",
                    "lineWidth": 2,
                    "polygonFill": "rgb(135,196,240)",
                    "polygonOpacity": 0.2,
                    "markerType": "ellipse",
                    "markerFill": "#1bbc9b",
                    "markerLineColor": "#000",
                    "markerWidth": 30,
                    "markerHeight": 30,
                    "markerPlacement": "point", // point, vertex, vertex-first, vertex-last, line
                    "textName": "A",
                    "textPlacement": "vertex",   // point, vertex, vertex-first, vertex-last, line
                    "textFill": "#fff"
                }
            });

            new maptalks.VectorLayer(MapLayerConst.MAP_POLYGON_LAYER).addGeometry(polygon).addTo(map);
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped>

</style>
